﻿@model GoDive.App.HomeViewModel

@{
    ViewBag.Title = "潜啊：一个专做潜水的自由社区";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section footer{
    <script src="webresource/js/index.js"></script>
}
<div class="header" id="content">
    <div class="carousel slide" id="slide">
        <ol class="carousel-indicators visible-xs visible-sm" id="indicator">
            @{
                int aIndex = 0;
                foreach (var banner in Model.Banners)
                {
                    string className = aIndex == 0 ? "active" : "";
                    <li class="@className"></li>
                    aIndex++;
                }
            }
        </ol>
        <div id="wrapper">
            <div class="carousel-inner">

                @{
                    int bIndex = 0;
                    foreach (var banner in Model.Banners)
                    {
                        string className = bIndex == 0 ? "item-v active" : "item-v";
                        <div class="@className">
                            <div class="header-title-wrap">
                                <div class="header-title">
                                    <h2>@banner.Title</h2>
                                    <h5>@banner.Desc</h5>
                                    @*<h5>游记攻略<span>By：天马行空</span></h5>*@
                                </div>
                            </div>
                            <div class="titles-card" style="background-image: url('http://120.24.102.165@{@banner.LargeImg}');"></div>
                        </div>
                        bIndex++;
                    }
                }
            </div>
        </div>

        <div class="search-wrap hidden-xs">
            <div class="search-mask">
                <div class="input-group search-cons">
                    <label class="radio-inline">
                        <i class="icon icon-radio on"></i> 目的地
                    </label>
                    <label class="radio-inline">
                        <i class="icon icon-radio"></i> 潜店
                    </label>
                    <label class="radio-inline">
                        <i class="icon icon-radio"></i> 攻略
                    </label>
                    <label class="radio-inline">
                        <i class="icon icon-radio"></i> 资讯
                    </label>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control search-input" placeholder="搜索目的地/潜店/攻略">
                    <span class="input-group-btn">
                        <button class="btn btn-default search-btn" type="button"><i class=" icon icon-search"></i></button>
                    </span>
                </div><!-- /input-group -->
            </div>
        </div>

        <!-- 缩略图 -->
        <ul class="show-nav">
            @{
                int sIndex = 0;
                foreach (var banner in Model.Banners)
                {
                    string className = sIndex == 0 ? "active" : string.Empty;
                    <li class="@className">
                        <a href="javascript:;"><img src="http://120.24.102.165@{@banner.SmallImg}" height="62" width="110"><span></span></a>
                    </li>
                    sIndex++;
                }
            }
        </ul>
    </div>
</div>
<div class="container main">
    <div class="title">
        <div class="text-center"><h2>热门目的地</h2></div>
        <div class="text-center breaddesc">世界这么大 一起去看看</div>
    </div>
    <div class="row discovery">
        <div class="titles-left">
            <div class="row titles-space">
                @{
                    int leftIndex = 0;
                    foreach (var item in Model.Destinations)
                    {
                        if (leftIndex > 2)
                        {
                            break;
                        }
                        string className = leftIndex == 0 ? "titles-item col-md-12 titles-1" : "titles-item col-md-6 titles-2";
                        <a href="/dest/detail/@item.ID" target="_blank">
                            <div class="@className">
                                <div class="titles-card" style="background-image: url('http://120.24.102.165@{@item.Pic}');"></div>
                                <h3 class="title"><span>@item.Name</span></h3>
                                <div class="mask">
                                    <i></i>
                                    <p class="pic-desc"><em>@item.Name</em><span class="texts">@item.Summary</span></p>
                                </div>
                            </div>
                        </a>
                        leftIndex++;
                    }
                }
            </div>
        </div>
        <div class="titles-right">
            @{
                int rightIndex = 0;
                foreach (var item in Model.Destinations)
                {
                    if (rightIndex <= 2)
                    {
                        rightIndex++;
                        continue;
                    }
                    string className = leftIndex == 0 ? "titles-item col-md-12 titles-3" : "titles-item col-md-6 titles-3";
                    <a href="/dest/detail/@item.ID" target="_blank">
                        <div class="titles-item titles-3">
                            <div class="titles-card" style="background-image: url('http://120.24.102.165@{@item.Pic}');"></div>
                            <h3 class="title"><span>@item.Name</span></h3>
                            <div class="mask">
                                <i></i>
                                <p class="pic-desc"><em>@item.Name</em><span class="texts">@item.Summary</span></p>
                            </div>
                        </div>
                    </a>
                }
            }
        </div>
    </div>

    <div class="title">
        <div class="text-center"><h2>精选攻略</h2></div>
        <div class="text-center breaddesc">世界这么大 一起去看看</div>
    </div>
    <div class="articles">
        <ul class="articles-group">
            @{
                foreach (var item in Model.Articles)
                {
                    <li class="articles-item">
                        <a href="" class="cover">
                            <img class="lazy" data-original="http://120.24.102.165@{@item.Pic}" alt="">
                        </a>
                        <div class="texts">
                            <div class="title-wrap">
                                <a class="author" href="">
                                    <img class="lazy img-circle" data-original="http://120.24.102.165@{@item.User.AvatarMiddle}" class="img-circle" alt="">
                                </a>
                                <a href="" class="title-small">@item.Title</a>
                                <span class="title-by">By: @item.User.UserName</span>
                                <span class="num-wrap hidden-xs">
                                    <span class="num"><i class="icon icon-comment"></i>@item.CommentCount</span>
                                    <span class="num"><i class="icon icon-favorite"></i>@item.FavoriteCount</span>
                                    <span class="num"><i class="icon icon-record"></i>@item.ViewCount</span>
                                </span>
                            </div>
                            <div class="content-wrap">
                                <p class="content">@item.Summary</p>
                                <div class="visible-xs num-small-wrap">
                                    <span class="num"><i class="icon icon-comment"></i>@item.CommentCount</span>
                                    <span class="num"><i class="icon icon-favorite"></i>@item.FavoriteCount</span>
                                    <span class="num"><i class="icon icon-record"></i>@item.ViewCount</span>
                                </div>
                            </div>
                        </div>
                    </li>
                }
            }
        </ul>

        <nav id="pagination">
            <p class="text-center more-page"><span>加载更多</span></p>
        </nav>
    </div>
</div>

<script type="text/template" id="article-template">
    <%_.each(articles, function(article) {%>
    <li class="articles-item">
        <a href="" class="cover">
            <img src="http://120.24.102.165<%=article.Pic%>" alt="">
        </a>
        <div class="texts">
            <div class="title-wrap">
                <a class="author" href="">
                    <img src="http://120.24.102.165<%=article.Pic%>" class="img-circle" alt="">
                </a>
                <a href="" class="title-small"><%=article.Title%></a>
                <span class="title-by">By: <%=article.UserID%></span>
                <span class="num-wrap hidden-xs">
                    <span class="num"><i class="icon icon-comment"></i><%=article.CommentCount%></span>
                    <span class="num"><i class="icon icon-favorite"></i><%=article.FavoriteCount%></span>
                    <span class="num"><i class="icon icon-record"></i><%=article.ViewCount%></span>
                </span>
            </div>
            <div class="content-wrap">
                <p class="content"><%=article.Summary%></p>
                <div class="visible-xs num-small-wrap">
                    <span class="num"><i class="icon icon-comment"></i><%=article.CommentCount%></span>
                    <span class="num"><i class="icon icon-favorite"></i><%=article.FavoriteCount%></span>
                    <span class="num"><i class="icon icon-record"></i><%=article.ViewCount%></span>
                </div>
            </div>
        </div>
    </li>
    <%})%>
</script>